<template>
  <div class="infoList">
    <el-form :inline="true" :model="formInline" class="demo-form-inline" size="small">
        <el-form-item >
          <el-button type="primary" size="small" @click="addStudent()">新增</el-button>
        </el-form-item>      
      </el-form>
    <el-table :data="tableData" border style="width: 100%">
    <el-table-column prop="name" label="姓名" align="center"></el-table-column>
    <el-table-column prop="age" label="年龄" align="center"></el-table-column>
    <el-table-column prop="sex" label="性别" align="center"></el-table-column>
    <el-table-column prop="father" label="父亲名字" align="center"></el-table-column>
    <el-table-column prop="mather" label="母亲名字" align="center"></el-table-column>
    <el-table-column prop="time" label="入校时间" align="center"></el-table-column>
    <el-table-column prop="address" label="家庭住址" align="center"></el-table-column>
    <el-table-column prop="phone" label="联系方式" align="center"></el-table-column>
    <el-table-column label="操作" align="center">
       <template slot-scope="scope">
          <el-button type="danger" size="mini" icon="el-icon-edit" @click="edit(scope.row)"></el-button>
          <el-button type="danger" size="mini" icon="el-icon-delete" @click="del(scope.row)"></el-button>
       </template> 
    </el-table-column>
  </el-table>
  <el-dialog :title="state?'添加学生信息':'修改学生信息'" :visible.sync="dialogFormVisible" width="500px">
  <el-form :model="form" :rules="rules" ref="form">
    <el-form-item label="姓名" :label-width="formLabelWidth" prop="name">
      <el-input v-model="form.name" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="年龄" :label-width="formLabelWidth" prop="age">
      <el-input v-model="form.age" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="性别" :label-width="formLabelWidth" prop="sex">
      <el-radio v-model="form.sex" label="1" >男</el-radio>
      <el-radio v-model="form.sex" label="2" >女</el-radio>
    </el-form-item>
    <el-form-item label="父亲名字" :label-width="formLabelWidth" prop="father">
      <el-input v-model="form.father" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="母亲名字" :label-width="formLabelWidth" prop="mather">
      <el-input v-model="form.mather" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="入校时间" :label-width="formLabelWidth" prop="time">
      <el-date-picker
      v-model="form.time"
      format="yyyy年MM月dd日"
      value-format="yyyy-MM-dd"
      type="date"
      placeholder="选择日期">
    </el-date-picker>
    </el-form-item>
    <el-form-item label="家庭住址" :label-width="formLabelWidth" prop="address">
      <el-input v-model="form.address" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="联系方式" :label-width="formLabelWidth" prop="phone">
      <el-input v-model="form.phone" autocomplete="off"></el-input>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="closeInfo">取 消</el-button>
    <el-button type="primary" @click="sure(form)">确 定</el-button>
  </div>
</el-dialog>
  </div>
</template>

<script>
import {info,getInfo,setInfo,delInfo} from '@/service/api/login'
  export default {
    data() {
      return {
        tableData:[],
        dialogFormVisible:false,
        formInline:{},
        form:{
          id:1,
          name:'',
          age :'',
          sex :'1',
          father:'',
          mather:'',
          time:'',
          address:'',
          phone:'',
        },
        total:'',
        state:true,
        formLabelWidth:'80px',
        rules:{
          name:[{required:true,message:'请输入姓名'}],
          age :{required:true,message:'请输入年龄'},
          sex :{required:true},
          time:{required:true,message:'请输入入学时间'},
          address:{required:true,message:'请输入家庭住址'},
          phone:{required:true,message:'请输入联系电话'},
        }
      }
    },
    created(){
      this.getData()
    },
    methods:{
      closeInfo(){
        this.dialogFormVisible = false
        this.$refs['form'].resetFields()
      },
      edit(data){
        this.dialogFormVisible = true
        this.state = false
        this.form ={...data}
      },
     del(row){
      this.$alert('你确定要删除吗','提示',{
        confirmButtonText:'确认',
        callback:async ()=>{
         const {data:res} = await delInfo(row.id)
          this.getData()
         if(res.InstanceType===200) this.$message({message:res.message,type:'success'})
        }
      })
    
      },
     async getData(){
       const {data:res} = await getInfo()
       if(res.status === 200){
          this.tableData = res.data
          this.total = res.total
      }
      },
      addStudent(){
        this.dialogFormVisible = true
        this.state = true
        this.form={
          name:'',
          age :'',
          sex :'1',
          father:'',
          mather:'',
          time:'',
          address:'',
          phone:'',
        }
        // this.$refs['form'].resetFields() 
        
      },
      sure(form){
        this.$refs['form'].validate( async(valid)=>{
            if(valid){      
              if(this.state){
              const {data:res} = await info(form)
              if(res.status === 200){
              this.getData()
              this.dialogFormVisible=false
              this.$refs['form'].resetFields()
              this.$message({type:'success',message:res.message})
              }}else{
              const {data:res} = await setInfo(form)
              if(res.status === 200){
              this.getData()
              this.dialogFormVisible=false
              this.$refs['form'].resetFields()
              this.$message({type:'success',message:res.message})
              }
              }
            }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
.infoList{
  .el-form {
    text-align: left;
  }
}
</style>